<template>
  <div>
    <h1>SKU管理</h1>
    <!-- TODO: 实现Sku管理列表 -->
    <el-table style="width: 100%" border :data="records">
      <el-table-column type="index" label="序号" align="center" width="80" />
      <el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label"
        :width="item.width" :align="item.align">
        <template v-if="item.prop === 'skuImg'" #default="{ row }">
          <img :src="row.skuDefaultImg" style="width: 100%; height: 100%" alt=" " />
        </template>
        <template v-else-if="item.prop === 'prop'" #default="{ row }">
          <el-button v-if="row.isSale === 0" type="success" icon="sortUp" @click="upSale(row)">上架</el-button>
          <el-button v-else type="success" icon="sortDown" @click="downSale(row)">下架</el-button>
          <el-button type="warning" icon="edit" @click="handleEdit()">编辑</el-button>
          <el-button type="info" icon="infoFilled" @click="getSkuInfo(row)">详情</el-button>
          <el-button type="danger" icon="delete">删除</el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column type="index" label="序号" width="80" align="center" />
      <el-table-column prop="skuName" label="商品名称" width=" " align="center" />
      <el-table-column prop="skuDesc" label="商品描述" width="" align="center" />
      <el-table-column prop="skuImg" label="商品图片" width="110" align="center">
        <template #default="{ row }">
          <img :src="row.skuDefaultImg" style="width: 100%; height: 100%;" alt=" " />
        </template>
      </el-table-column> -->
      <!-- <el-table-column prop="weight" label="重量" width="80" align="center" />
      <el-table-column prop="price" label="价格" width="80" align="center" />
      <el-table-column prop="prop" label="操作" width=" " align="center">
        <template #default="{ row }">
          <el-button v-if="row.isSale === 0" type="success"  icon="sortUp">上架</el-button>
          <el-button v-else type="success"  icon="sortDown">下架</el-button>
          <el-button type="success"  icon="edit">编辑</el-button>
          <el-button type="info"  icon="infoFilled">详情</el-button>
          <el-button type="danger" icon="delete">删除</el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <!-- 分页 -->
    <el-pagination style="margin-top: 20px; text-align: center;padding: 10px 5px;"
      :current-page="page" :page-sizes="[3, 5, 10]" :page-size="limit" layout="prev, pager, next, jumper,sizes,total"
      :total="total" @size-change="handleSizeChange" background="true" @current-change="getSkuList" />

    <!-- 弹窗 -->
    <el-drawer v-model="show" title="商品详情" style="width:50%;" :direction="direction" :before-close="handleClose">
      <el-row>
        <el-col :span="5">名称:</el-col>
        <el-col :span="16">{{ skuInfo.skuName }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="5">描述:</el-col>
        <el-col :span="16">{{ skuInfo.skuDesc }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="5">价格:</el-col>
        <el-col :span="16">{{ skuInfo.price }}元</el-col>
      </el-row>
      <el-row>
        <el-col :span="5">平台属性:</el-col>
        <el-col :span="16">
          <el-tag v-for="(attr, index ) in skuInfo.skuAttrValueList" :key="index" type="success" style="margin:5px">
            {{ attr.attrName }}:{{ attr.valueName }}
          </el-tag>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">商品图片:</el-col>
        <el-col :span="16">
          <el-carousel height="450px">
            <el-carousel-item v-for="item in skuInfo.skuImageList" :key="item.id">
              <img :src="item.imgUrl" style="width: 100%; height: 100%;">
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>

  </div>
</template>

<script>
export default {
  name: "SkuIndex",
  data() {
    return {
      page: 1, // 代表当前第几页
      limit: 10, // 代表当前页面有几条数据
      records: [], // 存储SKU列表的数据
      total: 0, // 存储分页器一共展示的数据
      skuInfo: {}, // 存储SKU信息
      show: false,
      columns: [
        { prop: "skuName", label: "商品名称", width: " ", align: "center" },
        { prop: "skuDesc", label: "商品描述", width: "", align: "center" },
        { prop: "skuImg", label: "商品图片", width: "110", align: "center" },
        { prop: "weight", label: "重量", width: "80", align: "center" },
        { prop: "price", label: "价格", width: "80", align: "center" },
        { prop: "prop", label: "操作", width: " ", align: "center" },
      ],
    };
  },
  //组件挂载完成后，请求数据
  mounted() {
    this.getSkuList();
  },
  methods: {
    //请求数据
    async getSkuList(pages = 1) {
      this.page = pages;
      //解构默认参数
      const { page, limit } = this;
      const res = await this.$API.sku.reqSkuList(page, limit);
      if (res.code === 200) {
        this.records = res.data.records;
        this.total = res.data.total;
      }
    },
    //分页器
    handleSizeChange(limit) {
      // 修改参数
      this.limit = limit;
      this.getSkuList();
    },
    //上架
    async upSale(row) {
      const res = await this.$API.sku.reqSale(row.id);
      if (res.code === 200) {
        row.isSale = 1;
        this.$message.success(`上架成功!${res.message}`);
        // this.getSkuList();
      } else {
        this.$message.error(`上架失败!${res.message}`);
      }
    },
    //下架
    async downSale(row) {
      const res = await this.$API.sku.reqCancel(row.id);
      if (res.code === 200) {
        row.isSale = 0;
        this.$message.success(`下架成功!${res.message}`);
        // this.getSkuList();
      } else {
        this.$message.error(`下架失败!${res.message}`);
      }
    },
    //编辑
    async handleEdit() {
      this.$message.warning("正在开发中!");
      // const res = await this.$API.sku.reqEdit();
      // if (res.code === 200) {
      //   this.$message("开发中");
      //   this.getSkuList();
      // }
    },
    //详情
    async getSkuInfo(sku) {
      this.show = true;
      const res = await this.$API.sku.reqSkuById(sku.id);
      if (res.code === 200) {
        this.skuInfo = res.data;
        console.log(res.data);
      }
    }
  },
};
</script>


<style scoped>
h1 {
  margin: 10px 0px;
  font-size: 24px;
  color: #0a279b;
  font-weight: bold;
}
.el-row {
  margin:10px 0px;
}
</style>